<template>
    <div class="playMusic">
        <musicBaseInfo v-if="songBaseInfo != null" :songBaseInfo="songBaseInfo"/>
        <audio 
        ref="aud"
        :src='musicSrc ? musicSrc : null'
        @play="playLoad"
        @timeupdate="playTimeupdate"
        @ended="end"
        autoplay
        >
        </audio>
        <musicControl v-if="songBaseInfo != null" 
        :songBaseInfo="songBaseInfo" 
        :playFlag = 'playFlag'
        :currentTime = 'currentTime'
        @changeMusic = "changeMusic"
        @controlBtn = "controlBtn"
        @changeCurrentTime = "changeCurrentTime"
        @changeVolume = "changeVolume"
        />
        <!--<el-button type="" @click="change" class="btn">改变进度</el-button>-->
    </div>
</template>

<script>
import musicBaseInfo from './musicBaseInfo'
import musicControl from './musicControl'
import {_checkMusic,_getMusicUrl} from '../../../network/detail'
// 通信bus
import MsgBus from '../../../util/bus'
export default {
    name: 'playMusic',
    props: [

    ],
    data() {
        return {
            musicSrc:null,
            songBaseInfo:null,
            // 歌单列表
            playList:[],
            // 暂停或播放flag
            playFlag:true,
            // 歌曲当前时间
            currentTime:0,
            rate:0,
        };
    },
    computed: {

    },
    created() {
        // 获取音乐信息
        MsgBus.$on('songDetail',(res => {
            let id = res.id
            //检查音乐是否可用
            this.getMusicUrl(id,res)
            
        }))
        
    },
    mounted() {

    },
    updated() {
        
    },
    watch: {

    },
    methods: {
        getMusicUrl(id,res){
            
            _checkMusic(id)
            .then(res => {
                console.log(res.data)

            })
            _getMusicUrl(id)
            .then(result => {
                // this.musicSrc = null
                if(result.data.data[0].url){
                    this.musicSrc = result.data.data[0].url
                    this.songBaseInfo = res
                    this.playMusic()
                    console.log('执行播放')
                }else{
                    this.musicSrc = null
                    this.$message({
                        message:"宁不是VIP哟",
                        type:'error'
                    })
                }
                
            })
        },
        // 双击播放
        playMusic(){
            let audio = this.$refs.aud
            if(audio !== null){
                let playPromise = audio.play()
                if(playPromise){
                    playPromise
                    .then(() => {
                        this.playFlag = false
                        this.volume = audio.volume
                    })
                    .catch(e => {
                        this.playMusic()
                    })
                }
            }
        },
        // 点击暂停或播放
        startOrStop(flag){
            let audio = this.$refs.aud
            if(audio !== null){
                if(flag){
                    let PlayPromise = audio.play()
                    if(PlayPromise){
                        PlayPromise
                        .then(() => {
                            this.playFlag = !this.playFlag
                            this.volume = audio.volume
                        })
                        .catch(e => {
                            this.startOrStop(this.playFlag)
                        })
                    }
                }else{
                    audio.pause()

                    this.playFlag = !this.playFlag
                }
            }
            
        },
        playLoad(){
            console.log('开始播放')
        },
        controlBtn(flag){
            if(flag == "playFlag"){
                this.startOrStop(this.playFlag)
            }
        },
        // 播放进度更新
        playTimeupdate(el){
            this.currentTime = el.target.currentTime
            // 获取当前进度
            let rate = el.target.currentTime / el.target.duration * 100 +'%'
            //发送进度给控件组件
            this.rate = rate
            MsgBus.$emit('rate',rate)
        },
        // 切换音乐上一首下一首
        changeMusic(flag){
            let index = this.songBaseInfo.index
            let playList = this.$store.state.playList
            if(flag){
                if(index + 1 >= playList.length){
                    index = -1
                }
                let songBaseInfo = playList[index + 1]
                this.getMusicUrl(playList[index + 1].id,songBaseInfo)
                
                
            }else{
                if(index - 1 < 0){
                    index = playList.length
                }
                let songBaseInfo = playList[index -1]
                this.getMusicUrl(playList[index -1].id,songBaseInfo)
            }
        },
        // 改变音乐进度
        changeCurrentTime(rate){
            let audio = this.$refs.aud
            audio.currentTime = 0
            audio.currentTime = audio.duration * rate
        },
        // 播放结束
        end(){
            let audio = this.$refs.aud
            audio.currentTime = 0
            this.playFlag = true
            this.changeMusic(true)
        },
        // 监听音量改变
        changeVolume(volume){
            let audio = this.$refs.aud 
            audio.volume = volume
        }
    },
    components: {
        musicBaseInfo,
        musicControl
    },
};
</script>

<style scoped lang="less">
.position_flex(@jc:space-between,@ai:center){
  display: flex;
  align-items: @ai;
  justify-content: @jc;
}
@backColor:#f5f6fa;
.playMusic{
    position: relative;
    width: 100%;
    height: 49px;
    background-color: @backColor;
    .musicBaseInfo{
        .position_flex;
        position: absolute;
        left: 0;
        bottom: 49px;
        width: 13vw;
        height: 80px;
        background-color: @backColor;
        border-bottom: 2px solid #ccc;
    }
    auto{
        height: 0;
    }
    .musicControl{
        .position_flex(flex-start);
        width: 100%;
        height: 100%;
    }
    .btn{
        position: absolute;
        right: 10px;
        top: 0;
    }
}
</style>
